<template>
	<view class="content">
		<view>
			<view class="my-activity-title">
				我发起的活动
				<image src="../../static/icon/add.png" mode="aspectFit" class="icon-30" @click="add_activity()"></image>
			</view>
			<view v-for="(item, index) in invite_list" :key="index" class="my-activity-list">
				<view>
					<view>
						<span>活动标题:</span>
						{{ item.title }}
					</view>
					<view>
						<span>活动内容:</span>
						{{ item.content }}
					</view>
				</view>
				<view><navigator class="activity-detail-btn" :url="'/pages/activity/detail?activity_id='+item.id">查看详情</navigator></view>
			</view>
		</view>

		<openAlert ref="add_activity" closeBtn>
			<scroll-view class="add-activity-form" scroll-y="true">
				<view class="uni-common-mt">
					<view class="uni-form-item uni-column">
						<view class="activity-label">活动标题：</view>
						<input v-model="activity_data.title" class="uni-input activity-input-title" focus placeholder="点击填写活动标题" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="activity-label">活动内容：</view>
						<view class="uni-textarea"><textarea v-model="activity_data.content" class="activity-input-content" placeholder="点击填写活动内容" /></view>
					</view>
					
					<view><span class="activity-label">背景色：</span><view :style="backgroundStyle" @click="show_color_picker()"></view></view>
					
					
					<view class="uni-form-item uni-column">
						<view class="activity-label">头部图片：</view>					
						<image :src="header" mode="aspectFill" style="width: 100rpx; height: 100rpx;" @click="chooseImages"></image>
					</view>
					
				</view>
				<view><button class="activity-btn" @click="submit_activity">提交</button></view>
			</scroll-view>
		</openAlert>
		
		<t-color-picker ref="colorPicker" :color="color" @confirm="confirm"></t-color-picker>
		
	</view>
</template>

<script>
import openAlert from '@/components/open-alert/open-alert';
import tColorPicker from '@/components/t-color-picker/t-color-picker.vue'
export default {
	components: {
		openAlert,
		tColorPicker
	},
	data() {
		return {
			invite_list: [],
			activity_data:{
				title:'',
				content:''
			},
			header:"../../static/icon/add.png",
			color:{r: 63,g: 81,b: 181,a: 1},
			backgroundStyle:"background-color:rgba(63,81,181,1);display: inline-block; width: 30rpx; height: 30rpx;"
		};
	},
	onLoad() {
		this.$comm.appLogin(user_info=>{
			this.get_list();
		})
	},
	methods: {
		get_list() {
			this.$comm.request({
				url: 'api/activity_list',
				success: res => {
					var res = res.data;
					this.invite_list = res.result.list;
				},
				fail: res => {}
			});
		},
		add_activity() {
			this.$refs.add_activity.Show();
		},
		show_color_picker(){
			this.$refs.colorPicker.open()
		},
		confirm(e){
			this.color = e.rgba
			let rgba = e.rgba
			let rgba_style = "background-color:rgba("+rgba.r+","+rgba.g+","+rgba.b+","+rgba.a+")"
			this.backgroundStyle = rgba_style+";display: inline-block; width: 30rpx; height: 30rpx;";
		},
		submit_activity(){
			var activity_data = this.activity_data
			this.$comm.request({
				url: 'api/activity_create',
				method:'POST',
				data:activity_data,
				success: res => {
					res = res.data
					if(res.code == 201){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}else{
						this.get_list()
						this.$refs.add_activity.Close()
					}
				},
				fail: res => {}
			});
		},
		chooseImages: function() {
			uni.chooseImage({
				success: (res) => {
					let image = res.tempFiles[0]
					this.$comm.ossUpFile(image,path=>{
						this.header = path
					});
					
				},
				fail: (res) => {}
			})
		},
	}
};
</script>

<style lang="less" scoped>
.my-activity-title {
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	margin-top: 20rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	color: #f0ad4e;
}
.my-activity-list {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 26rpx;
	background-color: #efefefef;
	padding: 20rpx;
	margin-top: 20rpx;
}

.my-activity-list span {
	font-weight: bold;
	font-size: 28rpx;
}

.activity-detail-btn {
	font-size: 26rpx;
	background-color: #8A6DE9;
	padding: 5rpx 20rpx;
	color: #FFFFFF;
	border-radius: 20rpx;
}

.icon-30 {
	width: 30rpx;
	height: 30rpx;
}
.add {
}

.add-activity-form {
	width: 700rpx;
	height: 800rpx;
	background-color: #ffffff;
	padding: 15rpx;
}
.activity-input-title{
	border-bottom: solid #CCCCCC 1px;
}
.activity-label{
	color: #8A6DE9;
}
.activity-btn{
	width: 400rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #FFFFFF;
	background-color: #F0AD4E;
	border: none;
}
.activity-btn::after{
	border: none;
}
.activity-input-content{
	height: 400rpx;
}
</style>
